<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人脸检测系统</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🎯 人脸检测系统</h1>
            <div class="status-info">
                <span class="status-indicator" id="connectionStatus">
                    <span class="status-dot" id="statusDot"></span>
                    <span id="statusText">未连接</span>
                </span>
                <div class="stats" id="statsDisplay">
                    <span>帧率: <span id="fpsDisplay">0</span> FPS</span>
                    <span>检测: <span id="faceCountDisplay">0</span> 个人脸</span>
                </div>
            </div>
        </header>

        <main class="main-content">
            <div class="video-container">
                <div class="video-wrapper">
                    <img id="videoStream" src="/video_feed" alt="摄像头画面" />
                    <div class="video-overlay" id="videoOverlay">
                        <div class="loading-spinner">
                            <div class="spinner"></div>
                            <p>正在加载摄像头...</p>
                        </div>
                    </div>
                </div>
                
                <div class="video-controls">
                    <!-- 移除原来的控制开关，这些功能移到控制面板中 -->
                </div>
            </div>

            <aside class="sidebar">
                <div class="sidebar-section">
                    <h3>📊 实时统计</h3>
                    <div class="stats-panel">
                        <div class="stat-item">
                            <span class="stat-label">总帧数:</span>
                            <span class="stat-value" id="totalFrames">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">平均推理时间:</span>
                            <span class="stat-value" id="avgInferenceTime">0ms</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">摄像头FPS:</span>
                            <span class="stat-value" id="cameraFps">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">分辨率:</span>
                            <span class="stat-value" id="resolution">-</span>
                        </div>
                    </div>
                </div>

                <div class="sidebar-section">
                    <h3>⚙️ 检测设置</h3>
                    <div class="setting-group">
                        <label for="confidenceSlider">置信度阈值:</label>
                        <input type="range" id="confidenceSlider" min="0.1" max="1.0" step="0.05" value="0.6">
                        <span id="confidenceValue">0.6</span>
                    </div>
                </div>

                <div class="sidebar-section">
                    <h3>🔧 系统信息</h3>
                    <div class="system-info">
                        <div class="info-item">
                            <span class="info-label">系统状态:</span>
                            <span class="info-value" id="systemStatus">正常</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">模型:</span>
                            <span class="info-value" id="modelInfo">YOLO11</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">摄像头:</span>
                            <span class="info-value" id="cameraInfo">设备0</span>
                        </div>
                    </div>
                </div>

                <div class="sidebar-section">
                    <h3>🎮 控制面板</h3>
                    <div class="control-switches">
                        <div class="control-group">
                            <label class="switch">
                                <input type="checkbox" id="detectionToggle" checked>
                                <span class="slider"></span>
                            </label>
                            <span>显示检测框</span>
                        </div>
                        
                        <div class="control-group">
                            <label class="switch">
                                <input type="checkbox" id="centerToggle" checked>
                                <span class="slider"></span>
                            </label>
                            <span>显示中心点</span>
                        </div>
                        
                        <div class="control-group">
                            <label class="switch">
                                <input type="checkbox" id="statsToggle" checked>
                                <span class="slider"></span>
                            </label>
                            <span>显示统计信息</span>
                        </div>
                    </div>
                    
                    <div class="control-buttons">
                        <button class="btn btn-primary" onclick="resetSettings()">重置设置</button>
                    </div>
                </div>
            </aside>
        </main>
    </div>

    <script src="/static/js/app.js"></script>
</body>
</html>